<template>
  <div id="test">
    <h1>This is a Test Page</h1>
    <!-- 添加用户信息 -->
    <form v-on:submit="addUser">
      用户名：<input type="text" v-model="newUser.name" placeholder="Enter name"/><br/><br/>
      年龄&nbsp;&nbsp;&nbsp;&nbsp;：<input type="text" v-model="newUser.email" placeholder="Enter email"/><br/><br/>
      <input class="btn" type="submit" value="添加"/>

    </form>

    <!-- 展示用户信息 -->
    <ul>
      <li v-for="user in users">
        {{user.name}} : {{user.email}}
        <button v-on:click="deleteUser(user)">X</button>
      </li>
    </ul>
  </div>

</template>

<!-- 行为 -->
<script>
  export default{
    name: 'test',
    data(){
      return {
        newUser: {},
        users: []
      }
    },
    methods: {
      addUser: function (e) {
        this.users.push({
          name: this.newUser.name,
          email: this.newUser.email,
        })
        e.preventDefault();
      },
      deleteUser: function (user) {
        this.users.splice(this.users.indexOf(user), 1)
      }
    }
  }
</script>

<!-- 样式 -->
<style scoped>
  h1 {
    color: #22aafa;
  }

  .btn {
    margin-left: 50px;
  }
</style>
